<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>这就是江湖九芯诸葛锁</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
            overflow-x: hidden; /* 防止水平滚动条 */
        }

        /* 文本容器样式 */
        .text-container {
            text-align: center;
            margin: 20px 0;
            padding: 20px;
            background: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 90%; /* 宽度适应屏幕 */
            max-width: 600px; /* 最大宽度限制 */
        }

        /* 标题样式 */
        h1 {
            margin-bottom: 10px;
        }

        /* 输入框和按钮样式 */
        input[type="text"] {
            width: calc(100% - 130px); /* 输入框宽度适应屏幕，留出按钮空间 */
            padding: 10px;
            font-size: 16px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            width: 120px; /* 按钮固定宽度 */
        }

        button:hover {
            background-color: #45a049;
        }

        /* 画布样式 */
        canvas {
            border: 1px solid #000000;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%; /* 画布宽度适应屏幕 */
            max-width: 600px; /* 最大宽度限制与文本容器一致 */
            height: auto; /* 高度自适应，保持宽高比 */
        }

        /* 响应式调整 */
        @media (max-width: 600px) {
            .text-container, canvas {
                width: 100%; /* 在小屏幕上完全填充宽度 */
                margin: 10px 0; /* 减小边距 */
            }

            input[type="text"], button {
                font-size: 14px; /* 在小屏幕上减小字体大小 */
                padding: 8px; /* 减小内边距 */
            }
        }
    </style>
</head>
<body>
    <div class="text-container">
        <h1>这就是江湖九芯诸葛锁</h1>
        <h2>by 小面胡子</h2>
        <p>输入一串0和1的数字。0表示熄灭的蜡烛(白),1表示点燃的蜡烛(红)。第一个数字是12点方向的,按顺时针排列。然后点击解决按钮</p>
        <div>
            输入串：<input type="text" id="input_str">
            <button id="btn_solve" onclick="btnsolve()">解决</button>
            <button id="btn_test" onclick="btntest()">test</button>
        </div>
    </div>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="bfsAsync.js"></script>
    <script type="text/javascript" src="draw.js"></script>
    <script type="text/javascript" src="zglock.js"></script>
    <script>
        document.onreadystatechange = function () {
            if (document.readyState === "interactive") {
                // drawCircles('01011011')
            }
        }
        function longCalculation(callback) {
            let result = 0;
            let count = 0;
            const maxIterations = 1e7;

            function iterate() {
                let i = 0;
                while (i < 1000 && count < maxIterations) {
                    result += count++;
                    i++;
                }
                console.log('result:', result);

                if (count < maxIterations) {
                    // 使用setTimeout来让出控制权
                    setTimeout(iterate, 0);
                } else {
                    callback(result);
                }
            }

            iterate();
        }

        function btntest()
        {
            longCalculation(function(result) {
                console.log('Calculation complete:', result);
            });        
        }
        function btnsolve()
        {
            //构造起始节点
            let vs = new ZGLockFactory();
            vs.initEnd();
            //用ZGLockFactory的move函数，对vs进行随机移动n次
            for(let i=0;i<15;i++)
            {
                //对变量axis进行赋值，axis的值为-1,1中的一个
                let axis = Math.random() > 0.5 ? 1 : -1;
                //对变量index进行赋值，index的值为2,3,4中的一个
                let index = Math.floor(Math.random() * 3) + 2;
                //对变量step进行赋值，step的值为1,2,3,4,5,6中的一个
                let step = Math.floor(Math.random() * 6) + 1;
                vs.move(axis,index,step);
            }

            // vs.addBlock(2,2);
            // vs.addBlock(5,2);
            // vs.addBlock(1,3);
            // vs.addBlock(2,3);
            // vs.addBlock(3,3);
            // vs.addBlock(4,3);
            // vs.addBlock(2,4);
            // vs.addBlock(2,5);
            // vs.addBlock(3,5);

            //构造终点节点
            let vd = new ZGLockFactory();
            vd.initEnd();
            //bfs计算
            //setBfsMaxLoop(10000)
            bfsAsync(vs,vd,function(trace) {
                //画结果
                //drawResult(initValue,trace)
            });

            //画结果
            //drawResult(initValue,trace)
        }
    </script>
</body>
</html>